<template>
    <div>
        <div>
            <router-view></router-view>
        </div>
        <t-tab-bar v-model="value" shape="round" theme="tag" :split="false">
            <t-tab-bar-item v-for="item in list" :key="item.name" :value="item.name" :badge-props="item.badgeProps" @click="switchTab(item)"
                :aria-label="item.ariaLabel">
                {{ item.text }}
                <template #icon>
                    <t-icon :name="item.icon" />
                </template>
            </t-tab-bar-item>
        </t-tab-bar>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Icon as TIcon } from 'tdesign-icons-vue-next';
const router = useRouter();
const value = ref('home');

const list = ref([
  { name: 'home', text: '首页', icon: 'home', badgeProps: { count: 16 }, ariaLabel: '首页，有16条消息' },
  { name: 'todo', text: '执行', icon: 'chat', badgeProps: { count: 'New' }, ariaLabel: '聊天，New' },
  { name: 'task', text: '管理任务', icon: 'task', badgeProps: { dot: true }, ariaLabel: '软件，有新的消息' },
  { name: 'profile', text: '我的', icon: 'user', badgeProps: { count: '···' }, ariaLabel: '我的，有很多消息' },
]);
const switchTab = (item) => {
    console.log(item)
    router.push({ name: `base.${item.name}.index` })
}
</script>